<template>

  <div>
    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="游戏名称">
          <el-input placeholder="请输入内容" v-model.trim="searchGameParam.name" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="游戏厂商">
          <el-input placeholder="请输入游戏厂商" v-model.trim="searchGameParam.manufacturer" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="游戏类型">
          <el-select v-model="searchGameParam.typeId" placeholder="请选择游戏类型" clearable>
            <el-option
              v-for="item in gameTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="评分">
          <el-select v-model="searchGameParam.grade" placeholder="请选择评价" clearable>
            <el-option label="☆ 浪费时间" :value="1"></el-option>
            <el-option label="☆☆ 勉强下咽" :value="2"></el-option>
            <el-option label="☆☆☆ 一般" :value="3"></el-option>
            <el-option label="☆☆☆☆ 优秀" :value="4"></el-option>
            <el-option label="☆☆☆☆☆ 优质" :value="5"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" size="mini" @click="getGameListPageBefore">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQueryGame">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveGame">新增</el-button>
        </el-form-item>

      </el-form>

    </el-card>



    <el-card style="margin-top: 10px">

      <el-row :gutter="10"  class="el-row">
        <!--span 栅格占据的列数,默认 24-->
        <el-col :span="6" v-for = "(game, index) in gameTable.data" :key="game.id" class="el-col" >

          <!--一个游戏的样式-->
          <el-card :key="index" >

            <el-row>
              <el-col :span="9">
                <el-image v-if="game.ico != null"
                          class="bookImage"
                          fit="contain"
                          :src="game.ico"></el-image>
                <el-image v-else
                          class="bookImage"
                          fit="contain"
                          :src="require('@/assets/images/collect/noData.png')"></el-image>
              </el-col>

              <el-col :span="15">
                <div class="bookAuthor hand" style="font-weight: 600;" @click="toOpenGameDetailed(game)">{{game.name | ellipsis20}}</div>
                <div class="bookAuthor bookAuthorColor">游戏厂商：{{game.manufacturer | ellipsis20}}</div>
                <div class="bookAuthor bookAuthorColor">游戏类型：{{game.gameTypeName | ellipsis20}}</div>
                <div class="bookAuthor bookAuthorColor">评分：</div>
                <el-rate class="bookAuthor" disabled v-model="game.grade"></el-rate>
              </el-col>
            </el-row>

            <el-row>
              <!--<el-col :span="24">-->
              <!--  <span class="bookAuthor">简介：</span>-->
              <!--  <p class="briefIntroduction hand" @click="toOpenBookDetailed(book)">{{book.briefIntroduction | ellipsis60}}</p>-->
              <!--</el-col>-->
              <el-col :span="24">
                <span class="bookAuthor">点评：</span>
                <p class="briefIntroduction hand" @click="toOpenGameDetailed(game)">{{game.comment | ellipsis60}}</p>
              </el-col>
            </el-row>

          </el-card>
        </el-col>

      </el-row>


      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; margin-top:10px;"
        background
        layout="total, prev, pager, next, jumper"
        @current-change="gamePageCurrentChange"
        :page-size="gameTable.size"
        :current-page="gameTable.current"
        :pager-count="5"
        :total="gameTable.total">
      </el-pagination>

    </el-card>

    <GameDetailed ref="gameDetailedRef" @openUpdGame="openUpdGame" @getGameListPage="getGameListPage"></GameDetailed>
    <GameSaveUpd ref="gameSaveUpdRef" @getGameListPage="getGameListPage"></GameSaveUpd>

  </div>

</template>

<script>

  import http from '@/utils/http'
  import GameDetailed from './GameDetailed.vue'
  import GameSaveUpd from './GameSaveUpd.vue'

  export default {
    name: "GameList",
    components: {
      GameDetailed,
      GameSaveUpd,
    },
    data(){
      return {
        // 游戏类型
        gameTypeList: [],
        // 表格
        gameTable: {
          // 表格数据
          data: [],
          // 每页记录数
          size: 8,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
        // 查询参数
        searchGameParam: {
          name: null,
          manufacturer: null,
          typeId: null,
          grade: null,
        },
      }
    },
    methods: {
      /**
       * 跳转打开游戏详情页面
       * @param row
       */
      toOpenGameDetailed(row){
        this.$refs.gameDetailedRef.openGameDetailed(row)
      },
      /**
       * 打开-修改游戏信息
       * @param row 当前行数据
       */
      openUpdGame(row){
        this.$refs.gameSaveUpdRef.openGamePage('upd', row, this.gameTypeList)
      },
      /**
       * 删除提示
       */
      delGameByIdTips(row){
        this.$confirm('是否删除游戏, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delGameById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 物理删除游戏
       * @param row
       */
      delGameById(row){
        http.post("/game/delGameById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getGameListPage()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 游戏分页被改变的时候
       * @param value 当前页
       */
      gamePageCurrentChange(value){
        this.gameTable.current = value
        this.getGameListPage()
      },
      /**
       * 打开游戏添加弹出框
       */
      openSaveGame(){
        this.$refs.gameSaveUpdRef.openGamePage('save', null, this.gameTypeList)
      },
      /**
       * 获取游戏类型
       */
      getGameType(){
        http.post("/game/getGameType", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.gameTypeList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置查询
       */
      resetQueryGame(){
        this.searchGameParam = {
          name: null,
          manufacturer: null,
          typeId: null,
          grade: null,
        }
      },
      /**
       * 查询前重置分页参数
       */
      getGameListPageBefore(){
        this.gameTable.current = 1
        this.getGameListPage()
      },
      /**
       * 分页查询游戏信息
       */
      getGameListPage(){
        this.searchGameParam.current = this.gameTable.current
        this.searchGameParam.size = this.gameTable.size

        http.post("/game/getGameListPage", this.searchGameParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.gameTable.total = data.total;
          this.gameTable.current = data.current;
          this.gameTable.size = data.size;
          // 处理数据
          this.gameTable.data = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    /**
     * 过滤器
     */
    filters: {
      /**
       * 数据超过长度显示省略号
       * @param value
       * @return {string|*}
       */
      ellipsis60(value) {
        if (!value) return "";
        if (value.length > 110) {
          return value.slice(0, 110) + "...";
        }
        return value;
      },
      /**
       * 数据超过长度显示省略号
       * @param value
       * @return {string|*}
       */
      ellipsis20(value) {
        if (!value) return "";
        if (value.length > 20) {
          return value.slice(0, 20) + "...";
        }
        return value;
      },
    },
    mounted(){
      this.getGameType()
      this.getGameListPage()
    }
  }
</script>

<style scoped>

/*让card进行浮动*/
.el-row {
  /*margin-bottom: 10px;*/
  display: flex;
  flex-wrap: wrap
}

/*简介*/
.briefIntroduction{
  height: 42px;
  max-height: 42px;
}

/*card之间的高*/
.el-col {
  border-radius: 4px;
  align-items: stretch;
  margin-bottom: 5px;
  padding: 2px;

}

/*图片列表框*/
.box-card {
  /*width: 100%;*/
  max-height: 660px;
  height: 660px;
  margin-top: 10px
}

/*书本图片样式*/
.bookImage {
  width: 102px;
  height: 136px
}

/*书籍名称部分的样式*/
.bookAuthor{
  width: 150px;
  /*width: 180px;*/
  margin-top: 12px;
  /*文字超长隐藏*/
  overflow:hidden;
}

/*书籍字体颜色*/
.bookAuthorColor {
  color: #909399;
}

.hand{
  /*变手*/
  cursor:pointer;
}

</style>
